<clr-modal [(clrModalOpen)]="createOpened" [clrModalStaticBackdrop]="staticBackdrop"
           [clrModalClosable]="closable">
  <h3 class="modal-title">添加凭据</h3>
  <div class="modal-body modal-height">
    <form clrForm clrForm #credentialForm="ngForm">
      <clr-input-container>
        <label>名称:</label>
        <input clrInput size=45 maxlength="15" type="text" pattern="{{name_pattern}}" [(ngModel)]="item.name" name="name" required>
        <clr-control-helper>{{name_pattern_tip}}</clr-control-helper>
        <clr-control-error>{{name_pattern_tip}}</clr-control-error>
      </clr-input-container>

      <clr-input-container>
        <label>用户名:</label>
        <input clrInput size=45 type="text" [(ngModel)]="item.username" name="username" required>
      </clr-input-container>

      <clr-radio-container>
        <label>凭据类型</label>
        <clr-radio-wrapper>
          <input type="radio" clrRadio name="options" value="password" [(ngModel)]="item.type"/>
          <label>password</label>
        </clr-radio-wrapper>
        <clr-radio-wrapper>
          <input type="radio" clrRadio name="options" value="privateKey" [(ngModel)]="item.type"/>
          <label>privateKey</label>
        </clr-radio-wrapper>
      </clr-radio-container>

      <clr-password-container *ngIf="item.type == 'password'">
        <label>密码:</label>
        <input clrPassword size=45 type="password" [(ngModel)]="item.password" name="password" required>
      </clr-password-container>

      <clr-textarea-container *ngIf="item.type == 'privateKey'">
        <label>密钥:</label>
        <textarea clrTextarea [(ngModel)]="item.private_key" name="private_key" required></textarea>
      </clr-textarea-container>
    </form>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline" (click)="onCancel()" [disabled]="isSubmitGoing">取消</button>
      <button type="submit" class="btn btn-primary" (click)="onSubmit()" [disabled]="credentialForm.invalid">提交</button>
    </div>
  </div>
</clr-modal>
